<template>
  <div class="warehouse_list">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="id"
        label="仓库id"
      ></el-table-column>
      <el-table-column prop="name" label="仓库名" />
      <el-table-column prop="name" label="仓库地址">
        <template #default="{ row }">
          <el-text
            >{{
              row.province +
              ' ' +
              row.city +
              ' ' +
              row.address
            }}
          </el-text>
        </template>
      </el-table-column>
      <el-table-column prop="postalCode" label="邮政编码" />
      <el-table-column prop="contact" label="联系方式" />
      <el-table-column prop="name" label="默认打包单价">
        <template #default="{ row }">
          <el-text>￥{{ row.packingFee }}</el-text>
        </template>
      </el-table-column>
    </el-table>

    <el-affix position="bottom" :offset="50">
      <div class="pagination_box">
        <Pagination
          v-model:currentPage="queryParams.pageNumber"
          v-model:pageSize="queryParams.pageSize"
          :total="queryParams.total"
          @pageChange="handlePageChange"
        ></Pagination>
      </div>
    </el-affix>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getBindingPackagingWarehouse } from '@/api/getAllWarehouseList.js'
import dayjs from 'dayjs'

// 表格数据
const tableData = ref([])

// 查询参数
const queryParams = ref({
  pageNumber: 1,
  pageSize: 15,
  total: 0,
})

// 获取系统所有账户余额变动记录
const getBindingPackagingWarehouseFn = async () => {
  const res = await getBindingPackagingWarehouse(
    queryParams.value,
    {},
  )
  tableData.value = res.content
  queryParams.value.total = res.totalElements
  console.log(res)
}
onMounted(() => {
  getBindingPackagingWarehouseFn()
})

// 分页变化
const handlePageChange = ({ currentPage, pageSize }) => {
  queryParams.value.pageNumber = currentPage
  queryParams.value.pageSize = pageSize
  getBindingPackagingWarehouseFn()
}
</script>

<style scoped lang="scss">
.balance_management {
  padding-bottom: 30px;

  .pagination_box {
    margin-bottom: 50px;
  }
}
</style>
